<template>
	<view class="wrap">
		<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" v-if="list.length==0"></u-empty>
		<view class="archives-box">
			<view class="archives-item" v-for="(item,index) in list" :key="index">
				<view class="archives-top flexWrap">
					<view class="archives-no-box flexWrapNo">
						<view class="line"></view>
						档案编号:<text>158949</text>
					</view>
					<view class="status active">展示中</view>
				</view>
				<view class="archives-center flexWrapNo">
					<view class="head-img">
						<image src="../../static/1.jpg"></image>
					</view>
					<view class="info-box">
						<view class="info-cont flexWrapNo">
							<view class="info-item">24岁</view>
							<view class="info-item">165cm</view>
							<view class="info-item">未婚</view>
							<view class="info-item">大专</view>
						</view>
						<view class="sign">
							个性签名个性签名个性签名个性签名个性签名个性签名个性签名个性签名个性签名个性签名个性签名个性签名个性签名个性签名个性签名个性签名个性签名个性签名个性签名个性签名
						</view>
					</view>
				</view>
				<view class="archives-bottom">
					<view class="fresh-time">最后更新:6分钟前</view>
					<view class="btn-box flexWrap">
						<view class="btn-cont flexWrapNo">
							<u-button size="small" color="#e16b8c" text="刷新" style="width:100upx;margin: 0;margin-right: 20upx;"></u-button>
							<u-button size="small" color="#e16b8c" text="修改头像" style="width:100upx;margin: 0;margin-right: 20upx;"></u-button>
							<u-button size="small" color="#e16b8c" text="修改档案" style="width:100upx;margin: 0;margin-right: 20upx;" @tap="goPage('/pages/uc/editArchives')"></u-button>
						</view>
						<image src="../../static/user/more-icon.png" class="more-icon" @tap="open(index)"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="button" @tap="goPage('/pages/uc/archives')">
			<u-button size="nomal" color="#e16b8c" text="去发布" style="width: 80%;"></u-button>
		</view>
		<u-popup :show="show" mode="bottom"  @close="close">
			<view class="operation-box flexWrap">
				<view class="operation-itm flexWarpCenterColumn">
					<view class="operation-icon">
						<image src="../../static/user/start-icon.png"></image>
					</view>
					<view class="operation-text">开始展示</view>
				</view>
				<view class="operation-itm flexWarpCenterColumn">
					<view class="operation-icon">
						<image src="../../static/user/stop-icon.png"></image>
					</view>
					<view class="operation-text">暂停展示</view>
				</view>
				<view class="operation-itm flexWarpCenterColumn">
					<view class="operation-icon">
						<image src="../../static/user/del-icon.png"></image>
					</view>
					<view class="operation-text">删除档案</view>
				</view>
			</view>
		    <view class="close-btn" @tap="close()">关闭</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{},
					{},
					{}
				],
				show:false,
				currmentIndex:0
			};
		},
		methods:{
			 open(index) {
				this.show=true
				this.currmentIndex=index
			},
			close() {
				this.show = false
				// console.log('close');
			}
		}
	}
</script>

<style lang="less">
	.archives-box{
		padding: 30upx;
		.archives-item{
			border-bottom: 1rpx solid #b6bdc7;
			padding-bottom: 20upx;
			margin-bottom: 20upx;
			.archives-top{
				.archives-no-box{
					font-size: 30upx;
					font-weight: bold;
					.line{
						width: 6upx;
						height: 26upx;
						border-radius: 50upx;
						background-color: #f56c6c;
						margin-right: 10upx;
					}
					text{
						color:#ef784b;
					}
				}
				.status{
					font-size: 26upx;
					font-weight: bold;
				}
				.active{
					color: #e16b8c;
				}
			}
			.archives-center{
				margin: 20upx 0;
				.head-img{
					width: 140upx;
					height: 140upx;
					border-radius: 20upx;
					overflow: hidden;
					flex: none;
					margin-right: 30upx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.info-box{
					height: 140upx;
					.info-cont{
						.info-item{
							font-size:28upx;
							color: #e16b8c;
							margin-right: 30upx;
						}
					}
					.sign{
						font-size:26upx;
						font-weight: bold;
						margin-top: 10upx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 3;
					}
				}
			}
			.archives-bottom{
				.fresh-time{
					font-size:26upx;
					color:#808388;
				}
				.btn-box{
					margin-top: 20upx;
					.more-icon{
						width: 40upx;
						height: 40upx;
					}
				}
			}
		}
	}
	.button{
		position: fixed;
		position: fixed;
		bottom: 30upx;
		left:30upx;
		right:30upx;
	}
	.operation-box{
		border-bottom: 1rpx solid #b6bdc7;
		padding: 30upx 40upx;
		font-size:28upx;
		.operation-icon{
			width: 60upx;
			height: 60upx;
			margin-bottom: 10upx;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	.close-btn{
		font-size:28upx;
		text-align: center;
		padding: 30upx 0;
	}
</style>
